<template>
  <div class="container">
    <div class="header">
      <i class="el-icon-collection"></i>
      <span>后台管理-管理员</span>
    </div>
    <div class="content">
      <!-- <el-input placeholder="请输入内容" v-model="input" clearable> </el-input> -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        style="display: flex"
      >
        <el-form-item label="请输入">
          <el-input
            v-model="formInline.user"
            placeholder="请输入编码/名称/位置/经纬度/人员等信息"
            style="width: 300px"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch" icon="el-icon-search"
            >查询</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button @click="onSubmit" icon="el-icon-refresh-left"
            >重置</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-download"
            >导出</el-button
          >
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-upload2"
            >导入</el-button
          >
        </el-form-item>
        <el-form-item style="margin-left: auto">
          <el-button type="primary" @click="onSubmit" icon="el-icon-plus"
            >新建</el-button
          >
        </el-form-item>
      </el-form>
      <div class="">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="人员信息" name="first"></el-tab-pane>
          <el-tab-pane label="角色权限" name="second"></el-tab-pane>
          <el-tab-pane label="日志留痕" name="third"></el-tab-pane>
          <el-tab-pane label="其他配置" name="fourth"></el-tab-pane>
          <el-tab-pane label="菜单配置" name="fourth"></el-tab-pane>
        </el-tabs>
        <div>
          <el-table
          :data="tableData"
          ref="multipleTable"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
          tooltip-effect="dark"
          :header-cell-style="{
            background: '#03146b',
            color: '#fff',
            fontSize: '18px',
            'text-align': 'center',
            padding: '16px 0' /* 调整这里的值以改变高度 */,
          }"
          :cell-style="{ 'text-align': 'center', fontSize: '13px' }"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column fixed prop="serial" label="序号" width="70">
          </el-table-column>
          <el-table-column prop="numbering" label="实验室统一编号" width="150">
          </el-table-column>
          <el-table-column prop="codename" label="代号" width="70">
          </el-table-column>
          <el-table-column prop="name" label="名称" width="80">
          </el-table-column>
          <el-table-column prop="address" label="采样点位置"> </el-table-column>
          <el-table-column prop="data" label="采样时间" width="100">
          </el-table-column>
          <el-table-column prop="personnel" label="采样人员" width="120">
          </el-table-column>
          <el-table-column prop="leader" label="数据负责人" width="120">
          </el-table-column>
          <el-table-column prop="species" label="树种"> </el-table-column>
          <el-table-column prop="longitude" label="经度" width="100">
          </el-table-column>
          <el-table-column prop="latitude" label="纬度" width="100">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div style="display: flex; justify-content: center; gap: 8px">
                <el-button
                  size="mini"
                  type="primary"
                  plain
                  icon="el-icon-edit"
                  @click="handleEdit(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  size="mini"
                  type="success"
                  plain
                  icon="el-icon-success"
                  @click="handleEdit(scope.$index, scope.row)"
                  >确认</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  plain
                  icon="el-icon-delete-solid"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
      </div>
      <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
          <el-button @click="toggleSelection()">删除所选</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- <div class="footer">
        <div style="margin-top: 20px">
          <el-button @click="selectAll">选择全部</el-button>
          <el-button @click="inverseSelection">反向选择</el-button>
          <el-button @click="toggleSelection()">清楚选择</el-button>
        </div>
        <div class="block">
          <span class="demonstration"></span>
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
            layout="total, sizes, prev, pager, next, jumper" :total="400">
          </el-pagination>
        </div>
      </div> -->
  </div>
</template>

<script>
export default {
  name: "adminManagement",
  components: {},
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      tableData: [
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          codename: "GNS",
          name: "巩乃斯林场林中",
          address: "中国新疆伊犁河流域巩乃斯林场",
          data: "2005-05-29",
          personnel: "袁玉江，张同文",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "84°38'16.3",
          latitude: "43°14'35.8",
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          codename: "BYG",
          name: "白杨河下",
          address: "中慿国新疆东天山木垒林场",
          data: "2007-09-07",
          personnel: "范子昂",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "90°27'75.5",
          latitude: "43.36'92",
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          codename: "GNS",
          name: "巩乃斯林场林中",
          address: "中国新疆伊犁河流域巩乃斯林场",
          data: "2005-05-29",
          personnel: "袁玉江，张同文",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "84°38'16.3",
          latitude: "43°14'35.8",
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          codename: "BYG",
          name: "白杨河下",
          address: "中慿国新疆东天山木垒林场",
          data: "2007-09-07",
          personnel: "范子昂",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "90°27'75.5",
          latitude: "43.36'92",
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          codename: "GNS",
          name: "巩乃斯林场林中",
          address: "中国新疆伊犁河流域巩乃斯林场",
          data: "2005-05-29",
          personnel: "袁玉江，张同文",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "84°38'16.3",
          latitude: "43°14'35.8",
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          codename: "BYG",
          name: "白杨河下",
          address: "中慿国新疆东天山木垒林场",
          data: "2007-09-07",
          personnel: "范子昂",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "90°27'75.5",
          latitude: "43.36'92",
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          codename: "GNS",
          name: "巩乃斯林场林中",
          address: "中国新疆伊犁河流域巩乃斯林场",
          data: "2005-05-29",
          personnel: "袁玉江，张同文",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "84°38'16.3",
          latitude: "43°14'35.8",
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          codename: "BYG",
          name: "白杨河下",
          address: "中慿国新疆东天山木垒林场",
          data: "2007-09-07",
          personnel: "范子昂",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "90°27'75.5",
          latitude: "43.36'92",
        },
        {
          serial: "IDM0001",
          numbering: "IDM0001-GNS",
          codename: "GNS",
          name: "巩乃斯林场林中",
          address: "中国新疆伊犁河流域巩乃斯林场",
          data: "2005-05-29",
          personnel: "袁玉江，张同文",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "84°38'16.3",
          latitude: "43°14'35.8",
        },
        {
          serial: "IDM0002",
          numbering: "IDMO002-BYG",
          codename: "BYG",
          name: "白杨河下",
          address: "中慿国新疆东天山木垒林场",
          data: "2007-09-07",
          personnel: "范子昂",
          leader: "尚华明",
          species: "雪岭云杉(Picea schrenkiana )",
          longitude: "90°27'75.5",
          latitude: "43.36'92",
        },
      ],
      currentPage4: 4,
      activeName: "second",
    };
  },
  created() {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    onSubmit() {
      console.log("submit!");
    },
    onSearch() {
      console.log("search!");
    },
    selectAll() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 反向选择
    // 反选，重新遍历一遍数据
    inverseSelection() {
      this.tableData.forEach((item) => {
        this.$refs.multipleTable.toggleRowSelection(item);
      });
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 编辑处理
    handleEdit(index, row) {
      console.log("Editing row:", index, row);
      // 可以弹出编辑对话框，并将选中行的数据传递进去
      this.$prompt("请输入新的名称:", row.name, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      })
        .then(({ value }) => {
          row.name = value; // 更新名称字段
          this.$message({
            type: "success",
            message: "编辑成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "编辑取消",
          });
        });
    },

    // 删除处理
    handleDelete(index, row) {
      console.log("Deleting row:", index, row);
      this.$confirm("确定删除此行数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 从表格数据中删除该行
          this.tableData.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "删除取消",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  // padding: 1rem;
  background: #fff;
  margin-top: 1.5rem;
}

.header {
  height: 4rem;
  display: flex;
  align-items: center;
  padding-left: 1rem;
  color: rgb(7, 46, 82);
  font-size: 24px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 添加阴影 */
  background: #fff;
  /* 确保背景为白色 */
}

.content {
  margin: 5rem 2rem;
  border: #eceaeae8 1px solid;
  padding: 1rem;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block {
  display: flex;
  gap: 16px; /* Adjust gap to your preference */
  margin-top: 20px;
}

/* 这部分是增加按钮圆角的样式 */
.el-button {
  border-radius: 5px;
  /* 增大圆角 */
}

.el-button--primary {
  border-radius: 5px;
  /* 确保主要按钮也有相同的圆角 */
}

</style>
